<template>
  <div id="app" :style="{background: 'url(' + nowBgImg + ')'+'no-repeat 100%/100%'}">
    <div class="nav">
      <ul class="nav-left left">
        <router-link to="/Home" tag="li">后花园</router-link>
        <li>那些坑</li>
        <li>不断学习</li>
        <li>做些什么</li>
        <router-link to="/aboutme" tag="li">关于我</router-link>
      </ul>
      <div class="right nav-right">
        <a href>登录</a>
      </div>
    </div>

    <div class="bottom-cell">
      <div class="slectBgImage right">
        <i
          :class="imgIndex<6?'el-icon-arrow-left active':'el-icon-arrow-left'"
          @click="()=>{if(this.imgIndex<6)this.imgIndex++; this.nowBgImg=this.bgImage[this.imgIndex]}"
        ></i>
        <i
          :class="imgIndex>0?'el-icon-arrow-right active':'el-icon-arrow-right'"
          @click="()=>{if(this.imgIndex>0)this.imgIndex--;this.nowBgImg=this.bgImage[this.imgIndex]}"
        ></i>
        <!-- <i class="el-icon-eleme active" style="backgroundColor:#5fadff; border-color: #5fadff"></i> -->
      </div>
    </div>
    <div class="footer">
      <p>听见你说，朝阳起又落。作者x某</p>
    </div>

    <!-- <div class="load" v-if="load">
      <div class="loader">
        <div class="loader-bg">
          <span>LOADING</span>
        </div>
        <div class="drops">
          <div class="drop1"></div>
          <div class="drop2"></div>
        </div>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <filter id="liquid">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
              result="liquid"
            />
          </filter>
        </defs>
      </svg>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      bgImage: [],
      imgIndex: 1,
      nowBgImg: "",
      load: true
    };
  },
  mounted() {
    this.getBgimage();
    setTimeout(() => {
      this.load = false;
    }, 4000);
  },
  methods: {
    getBgimage() {
      for (let index = 1; index < 8; index++) {
        this.$http.get("getImage?idx=" + index).then(res => {
          res.data.images[0].url =
            "https://cn.bing.com" + res.data.images[0].url;
          // console.log(res.data.images[0].url);
          this.bgImage.push(res.data.images[0].url);
        });
      }
      // console.log(this.bgImage);

      this.nowBgImg = this.bgImage;
      console.log(this.nowBgImg);
    }
  }
  // watch: {
  //   nowBgImg: () => {
  //     this.nowBgImg = this.bgImage[this.imgIndex];
  //   }
  // }
};
</script>
<style lang="less">

.left {
  float: left;
}
.right {
  float: right;
}
body {
  width: 100%;
  height: 100%;
  color: #dce2e4;
  #app {
    position: relative;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    .nav {
      height: 63px;
      .nav-left {
        margin-left: 70px;
        // margin-top: 5px;
        li {
          float: left;
          margin-left: 36px;
          line-height: 63px;
          font-size: 26px;
        }
        li:hover {
          color: #ffffff;
          cursor: pointer;
        }
      }
      .nav-right {
        line-height: 63px;
        font-size: 26px;
        margin-right: 90px;
        color: #dce2e4;
      }
    }

    .bottom-cell {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 200px;
      .slectBgImage {
        position: relative;
        height: 60px;
        margin-right: 100px;
        i {
          position: relative;
          width: 60px;
          height: 60px;
          border: 3px solid #fff;
          border-radius: 50%;
          font-size: 40px;
          line-height: 60px;
          text-align: center;
          margin-left: 40px;
          color: #fff;
          opacity: 0.5;
          cursor: pointer;
          transition: all 0.5s;
        }

        .active {
          opacity: 1;
          transition: all 0.5s;
        }
      }
    }
  }
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    // background-color: #333;
    height: 33px;
    line-height: 33px;
    color: #fff;
    font-size: 12px;
    text-align: right;
    opacity: .5;
  }
}

// .load {
//   width: 100%;
//   height: 100%;
//   background: url("http://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/37d12f2eb9389b5036addc908735e5dde6116ea5.jpg")
//     no-repeat 100%/100%;
//   position: fixed;
//   top: 0;
//   z-index: 999;
//   @keyframes fade-in {
//     0% {
//       opacity: 1;
//     }
//     100% {
//       opacity: 1;
//     }
//   }

//   @keyframes drop {
//     0% {
//       bottom: 0px;
//       opacity: 1;
//     }

//     80% {
//       opacity: 1;
//     }

//     100% {
//       opacity: 1;
//       bottom: -200px;
//     }
//   }

//   @keyframes wave {
//     0% {
//       background-position: 0 160px;
//       background-size: 170px 300px;
//     }

//     100% {
//       background-position: 500px -18px;
//       background-size: 250px 150px;
//     }
//   }

//   body {
//     background-color: #e0e0e0;
//   }

//   .loader {
//     width: 120px;
//     height: 120px;
//     position: fixed;
//     margin: auto;
//     left: 0;
//     right: 0;
//     top: 0;
//     bottom: 0;
//     text-align: center;
//     line-height: 120px;
//     font-family: sans-serif;
//     color: #ffffff;
//     font-size: 16px;
//   }

//   .loader span {
//     z-index: 3;
//   }

//   .loader-bg {
//     position: absolute;
//     left: 0;
//     right: 0;
//     top: 0;
//     bottom: 0;
//     background: transparent repeat-x 0 100px/150px 300px
//       url("");
//     z-index: 2;
//     animation: wave 1s ease-out forwards;
//   }

//   .drops {
//     -webkit-filter: url("#liquid");
//     filter: url("#liquid");
//     position: absolute;
//     top: 0;
//     left: 0;
//     bottom: 0;
//     right: 0;
//     z-index: 1;
//     opacity: 1;
//     animation: fade-in 0.1s linear 0.4s forwards;
//   }

//   .drop1,
//   .drop2 {
//     width: 21px;
//     height: 24px;
//     border-radius: 50%;
//     position: absolute;
//     left: 0;
//     right: 0;
//     bottom: 0;
//     margin: auto;
//     background-color: #10a7c1;
//   }

//   .drop1 {
//     width: 90px;
//     height: 16px;
//     bottom: 2px;
//     border-radius: 0;
//   }

//   .drop2 {
//     animation: drop 1.3s cubic-bezier(1, 0.19, 0.66, 0.12) 0.5s infinite;
//   }
// }
</style>

